import { View, Text, Icon } from '@tarojs/components'
import { Radio } from '@nutui/nutui-react-taro'
import { Check } from '@nutui/icons-react-taro'
import './index.scss'

function RadioQuestion({ options, value, onChange }) {
  // 定义自定义图标
  const customIcon = <Check />;
  const customActiveIcon = <Check color="#07c160" />;
  return (
    <Radio.Group
      value={value}
      onChange={onChange}
      labelPosition="left"
      style={{ width: '100%' }}
    >
      {options.map((option) => (
        <View
          key={option.value}
          className={`option-item ${value === option.value ? 'option-item--selected' : ''}`}
          onClick={() => onChange(option.value)}
        >
          {option.icon && (
            <Icon
              name={option.icon}
              size={18}
              color={option.iconColor || '#999'}
            />
          )}
          <Text>{option.label}</Text>
          <Radio
            icon={customIcon}
            activeIcon={customActiveIcon}
            value={option.value}
          >
            {/* 选项内容 */}
          </Radio>
        </View>
      ))}
    </Radio.Group>
  );
}

export default RadioQuestion;